<template>
  <div class="search-user-container">
    <div class="result-area">
      <div class="flex-area">
        <div
            class="user-item"
            v-for="user in resultList"
            :key="user.userId">
          <v-avatar color="#f1f1f1">
            <v-img :src="user.avatar"></v-img>
          </v-avatar>
          <div class="username">
            {{ user.nickname }}
            <div class="nickname">
            </div>
            <v-btn
                v-if="user.myFriend"
                x-small depressed dark
                :color="customerColor">
              已添加
            </v-btn>
            <v-btn
                v-if="!user.myFriend"
                x-small depressed dark
                @click="handleShowValidateMessageAdditionMessagePopup(user)"
                :color="customerColor">
              加好友
            </v-btn>
          </div>
        </div>
      </div>
      <v-pagination
          v-model="pageIndex"
          @input="handleChangePage"
          :color="customerColor"
          :length="totalPage"
          circle/>
    </div>
    <v-dialog
        v-model="validateMessageAdditionMessagePopup"
        class="rounded-xl"
        width="50vw"
        max-width="700"

        @close="handleCloseValidateMessageAdditionMessagePopup()">
      <div class="search-user-popup-container">
        <div class="title-text">
          验证消息
        </div>
        <v-text-field
            label="请输入验证消息"
            clearable
            v-model="validateMessageAdditionMessageValue"
            :color="customerColor"
            type="text"
        ></v-text-field>
        <div class="my-2 center" style="margin: 0 auto">
          <v-btn
              color="primary"
              dark
              @click="sendValidateMessage()"
          >
            提 交
          </v-btn>
        </div>
      </div>
    </v-dialog>
  </div>
</template>

<script>
import {searchUser} from "@/api";

export default {
  name: "searchUser",
  props: {
    value: {
      type: String,
    }
  },
  data() {
    return {
      customerColor: '',
      pageSize: 9,
      pageIndex: 1,
      totalItem: 2,
      resultList: [],
      userInfo:{},
      currentValidateMessageUser:{},
      validateMessageAdditionMessagePopup:false,
      validateMessageAdditionMessageValue:"",
    }
  },
  methods: {
    handleShowValidateMessageAdditionMessagePopup(user){
      this.validateMessageAdditionMessagePopup = true
      this.currentValidateMessageUser = user
    },
    handleCloseValidateMessageAdditionMessagePopup(){
      this.validateMessageAdditionMessagePopup = false
      this.currentValidateMessageUser = {}
    },
    async getSearchResult() {
      let res = await searchUser('username', this.value, this.pageIndex - 1, this.pageSize);
      if (res.success) {
        this.resultList = res.data.list;
        this.totalItem = res.data.total;
      }
    },
    handleChangePage(pageIndex) {
      this.pageIndex = pageIndex;
      this.getSearchResult()
    },
    sendValidateMessage() {
      let validateMessage = {
        roomId: this.userInfo.id+"-"+this.currentValidateMessageUser.id,
        senderId: this.userInfo.id,
        senderName: this.userInfo.username,
        senderNickname: this.userInfo.nickname,
        receiverId: this.currentValidateMessageUser.id,
        time: new Date(),
        senderAvatar: this.userInfo.avatar,
        additionMessage: this.validateMessageAdditionMessageValue,
        status: 0,
        validateType:0,
      };
      this.$socket.emit("sendValidateMessage", validateMessage)
      this.$message.success('验证消息发送成功');
      this.handleCloseValidateMessageAdditionMessagePopup()
    }
  },
  computed: {
    totalPage() {
      return Math.ceil(this.totalItem / this.pageSize);
    }
  },
  mounted() {
    this.customerColor = document.getElementsByTagName('body')[0].style.getPropertyValue('--custom-color') ?? '#4746a3';
    this.getSearchResult();
    this.userInfo = JSON.parse(sessionStorage.getItem("userInfo"));
  }
}
</script>

<style lang="scss" scoped>
@import 'searchUser.scss';
</style>